import React, {FC, useState} from "react";
import {Box, calc, Flex, HStack, Icon, Text} from "@chakra-ui/react";
import { Album } from "@/faker/album/albums";
import { recommendedAlbumTypes } from "@/data/recommended-album-types";
import TextTag from "@/components/TextTag";
import AlbumItem from "@/components/songs-albums"
import SongsAlbums from "@/components/songs-albums";
import { Navigate } from "react-router-dom";
import { replaceSongList } from "@/store/modules/player/reducer";
import { useAppDispatch } from "@/hooks";
import { ChevronRightIcon } from "@chakra-ui/icons";
interface IProps{
    albums:Album[]
}

const HotRecommend:FC<IProps> =({albums}:IProps)=>{
    const [activeIndex, setActiveIndex] = useState(0);

    const dispatch = useAppDispatch();
    const onHandleClick = (id: number) => {
        const selectedAlbum = albums.find((album:Album) => album.id === id);
        if (selectedAlbum) {
            dispatch(replaceSongList(selectedAlbum.songs));
        }
    };
  
    return (
        <Flex direction="column"  mt={10}>
            <Flex>
                <Text fontSize="xx-large" fontWeight="bold" color="gray.700" >推荐歌单</Text>

                <HStack ml={6}>
                {recommendedAlbumTypes.map((type,index) => (
                    <TextTag   
                    isActive={activeIndex === index} onClick={() => setActiveIndex(index)} 
                    key={type.name}>
                        {type.name}
                    </TextTag>
                ))}
                <Text textAlign="end"     fontSize="sm" fontWeight="thin" color="gray.500" >更多
                    <Icon  as={ChevronRightIcon} />
                </Text>
                </HStack>
                


            </Flex>

            <Box>
                <SongsAlbums 
                albums={albums.slice(0,5)}
                onHandleClick={onHandleClick}
                />
            </Box>
        </Flex>
    )
    
}

export default  HotRecommend